<template>
	<view class="container">
		<view class="card tip flex-row">
			<image src="../../../static/img/emergency/warning.png"></image>
			<view>提示：应急物资仅在紧急情况下使用，非紧急情况，请勿挪作他用。</view>
		</view>
		<scroll-view @scrolltolower="getNextPageData" scroll-y="true" class="body">
			<!--列表-->
			<view v-if="list.length" class="scroll">
				<view v-for="(item, index) in list" :key="index" @click="toDetail(item)" class="card">
					<view class="title flex-row"><view class="name">{{ item.title || '' }}</view></view>
					<view class="item"><view>位置：{{ item.position_name || '' }}</view></view>
					<view class="item flex-row">
						<view>物品数量：{{ item.goods_num || 0 }}</view>
						<view>负责人：{{ item.response_man_name || '' }}</view>
					</view>
					<uni-icons type="arrowright" size="20" color="#005BBA"></uni-icons>
				</view>
				<view class="nodata">没有更多了~</view>
			</view>
			<view v-else class="nodata">没有更多了~</view>
		</scroll-view>
	</view>
</template>

<script>
import uniIcons from "@/components/uni-icons/uni-icons.vue";
export default{
	components: { uniIcons },
	data(){
		return {
			userid: uni.getStorageSync('userid'),
			type: 'job',
			page: 1,
			total: 1,
			list: []
		}
	},
	onShow(){
		this.getList();
	},
	methods: {
		toDetail(item){
			uni.setStorageSync('emergencyMaterialDetail', item);
			uni.navigateTo({url: 'detail'});
		},
		// 获取列表
		getList(){
			let _this = this;
			uni.request({
				url: this.$API.emergencyMaterialList,
				header: this.$API.get_head(),
				success: (res)=>{
					_this.total = res.data.total;
					
					// 判断是第一页还是后续页
					let data = res.data.rows;
					if(_this.page == 1){
						_this.list = data;
					}else{
						_this.list = _this.list.concat(data);
					}
				}
			})
		},
		// 分页加载
		getNextPageData(){
			this.page++;
			if(this.page < this.total){
				this.getList();
			}
		}
	}
}
</script>

<style scoped>
.body{
	height: calc(100vh - 110upx);
	overflow: hidden;
}

.tip image{
	width: 48upx;
	height: 48upx;
}
.tip view{
	font-size: 28upx;
	line-height: 1.4;
	width: calc(100% - 70upx);
}

/*卡片*/
.card{
	background: #fff;
	margin: 20upx 20upx 0;
	border-radius: 16upx;
	padding: 14upx 20upx;
	border: 2upx solid #F6F6F6;
	box-shadow: 0 0 4upx #eee;
	position: relative;
}
.card .title{
	margin-bottom: 20upx;
}
.card .title view{
	height: 42upx;
	font-size: 28upx;
}
.card .title view.name{
	text-indent: 20upx;
	position: relative;
}
.card .title view.name::before{
	content: '';
	width: 10upx;
	height: 26upx;
	background: #5F96F2;
	border-radius: 4upx;
	position: absolute;
	top: 14upx;
	left: 0;
}
.card .item view{
	color: #999;
	font-size: 28upx;
	line-height: 1.6;
}
.card .item.flex-row view{
	width: 50%;
}
.card uni-icons,
.card .uni-icons{
	position: absolute;
	right: 16upx;
	top: calc(50% - 30upx);
}
</style>
